import { PageContainer, ProList } from "@ant-design/pro-components";
import { Button, Tag } from "antd";

import style from "./index.module.less";
import { DEFAULT_PAGE_SIZE } from "@/utils/contants";
import EditOrg from "./components/EditOrg";
import { useOrganizations } from "@/services/org";
import { useState } from "react";

// const data = [
//   "语雀的天空",
//   "Ant Design",
//   "蚂蚁金服体验科技",
//   "TechUI",
//   "TechUI 2.0",
//   "Bigfish",
//   "Umi",
//   "Ant Design Pro",
// ].map((item) => ({
//   title: item,
//   subTitle: <Tag color="#5BD8A6">语雀专栏</Tag>,
//   actions: [<a key="run">邀请</a>, <a key="delete">删除</a>],
//   avatar:
//     "https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg",
//   content: (
//     <div
//       style={{
//         flex: 1,
//       }}
//     >
//       <div
//         style={{
//           width: 200,
//         }}
//       >
//         <div>发布中</div>
//         <Progress percent={80} />
//       </div>
//     </div>
//   ),
// }));
/**
 * 门店管理
 */
const Org = () => {
  const [showEdit, setShowEdit] = useState(false);
  const [curId, setCurId] = useState('');
  const { loading, page, data, refetch } = useOrganizations();
  
  const onPageChanngeHandler = (pageNum=1, pageSize=10) => {
    refetch({
      page: {
        pageNum,
        pageSize,
      },
    });
  };
  const dataSource = data?.map((item) => ({
    ...item,
    subTitle: (
      <div>
        {item.tags?.split(",").map((tag) => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </div>
    ),
    actions: [
      <a key="edit" onClick={() => editInfoHandler(item.id)}>
        编辑
      </a>,
      <a key="delete" onClick={() => delInfoHandler()}>
        删除
      </a>,
    ],
    content: item.address,
  }));
  const addInfoHandler = () => {
    setCurId('')
    setShowEdit(true);
  };
  const onCloseHandler = () => {
    onPageChanngeHandler(page?.pageNum,page?.pageSize)
    setShowEdit(false);
  };
  const editInfoHandler = (id:string) => {
    setCurId(id)
    setShowEdit(true);
  };
  const delInfoHandler = () => {
    // 发送请求
    // await use。。。
    // 刷新页面
    onPageChanngeHandler(page?.pageNum,page?.pageSize)
  };

  
  return (
    <div className={style.container}>
      <PageContainer
        loading={loading}
        header={{ title: "门店管理" }}
        extra={[
          <Button key="1" type="primary" onClick={addInfoHandler}>
            新增门店
          </Button>,
        ]}
      >
        <ProList<any>
          pagination={{
            defaultPageSize: DEFAULT_PAGE_SIZE,
            showSizeChanger: false,
            total: page?.total,
            onChange: onPageChanngeHandler,
          }}
          grid={{ gutter: 10, column: 2 }}
          showActions="always"
          rowSelection={false}
          metas={{
            title: { dataIndex: "name" },
            subTitle: {},
            type: {},
            avatar: { dataIndex: "logo" },
            content: { dataIndex: "address" },
            actions: {
              cardActionProps: "extra",
            },
          }}
          dataSource={dataSource}
        />
        {showEdit && <EditOrg id={curId} onClose={onCloseHandler} />}
      </PageContainer>
    </div>
  );
};

export default Org;
